<template>
	<view class="table-fill">
		<view class="t-col">
			<text class="t-title">县（市、区）</text>
			<view class="t-content">
				<view class="list-area">
					<listSelect v-model="areaCode" :list="cityList" @confirm="confAreaCode" style="width: 185rpx"></listSelect>
					<listSelect v-model="areaCode2" :list="townList" style="width: 185rpx"></listSelect>
				</view>
			</view>
		</view>
		<colSin v-for="(item, index) in dataList" :key="index" :data="item" class="mt10"></colSin>

		<view class="submit-btn" @click="submit">提交</view>
	</view>
</template>
<script>
	import listSelect from '@/components/common/select/listSelect.vue'
	import sjsbApi from '@/api/yjzh/sjsb'
	export default {
		name: 'county-flood-warn',
		components: { listSelect, colSin: () => import('./col.vue') },
		data() {
			return {
				cityList: [],
				townList: [],
				areaCode: '',
				areaCode2: '',

				dataList: [
					{
						lable: '检查项目1',
						title: '自动雨水情监测站点及预警设施设备运行及使用维护是否正常',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目2',
						title: '县级监测预警平台软硬件运行及使用维护是否正常',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目3',
						title: '雨水情监测站点和平台网络等通讯费用是否缴纳',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目4',
						title: '各级操作应用人员对山洪灾害监测预警系统是否熟练掌握',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目5',
						title: '是否开展山洪灾害隐患点的排查更新',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目6',
						title: '山洪灾害监测预警责任是否落实',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					},
					{
						lable: '检查项目7',
						title: '是否存在影响小溪小河及沟道行洪的各类安全隐患',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					}
				]
			}
		},
		computed: {},
		mounted() {
			this.getUserInfoData = uni.getStorageSync('getUserInfoData')
			this.getDeptTreeData = uni.getStorageSync('getDeptTreeData')

			this.areaCode = this.getUserInfoData.dept.parentCode ? this.getUserInfoData.dept.parentCode : ''
			this.areaCode2 = this.getUserInfoData.dept.code
			let cityList = this.getDeptTreeData[0].children.map((item) => {
				return {
					label: item.name,
					value: item.code,
					children: item.children
				}
			})
			this.cityList = cityList

			let index = this.cityList.findIndex((el) => el.value == this.areaCode)
			if (index == -1) {
				index = 0
			}
			this.confAreaCode(null, this.cityList[index], false)
		},
		methods: {
			confAreaCode(value, item, isAdd = true) {
				this.townList = item.children.map((el) => {
					return {
						label: el.name,
						value: el.code
					}
				})
				if (isAdd) {
					this.areaCode2 = this.townList[0].value
				}
			},
			async submit() {
				let item = this.townList.find((el) => el.value == this.areaCode2)
				if (!item) {
					uni.showToast({
						icon: 'error',
						title: '请选择市县'
					})
					return
				}
				let data = {
					missionType: 1,
					areaName: item.label,
					areaCode: this.areaCode2,
					inspectProject: this.dataList
				}

				try {
					uni.showLoading({
						title: '正在提交'
					})
					const resp = await sjsbApi.securitycheckAdd(data)

					if (resp.code == 200) {
						uni.showLoading({
							title: '提交成功'
						})
					}
					setTimeout(() => {
						this.$hideLoading()
					}, 500)
				} catch (error) {
					console.error(error)
					this.$hideLoading()
				}
			}
			// changeFolderName(value) {
			// 	this.folderName = value
			// }
		}
	}
</script>
<style lang="less" scoped>
	.table-fill {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;
		overflow: auto;
		.t-col {
			width: 100%;
			display: flex;
			height: 66rpx;
			align-items: center;
			.t-title {
				width: 230rpx;
				text-align: right;
			}
			.t-content {
				display: flex;
				flex: 1;
				.list-area {
					background: #ffffff;
					border: 1rpx solid #aeaeae;
					border-radius: 4rpx;
					height: 66rpx;
					width: 90%;
					display: flex;
					align-items: center;
					// box-shadow: inset 0rpx 10rpx 30rpx rgba(0, 133, 255, 0.12);
				}
			}
		}
		.submit-btn {
			width: 636rpx;
			height: 80rpx;
			background: #41a4ff;
			backdrop-filter: blur(15rpx);
			/* Note: backdrop-filter has minimal browser support */

			border-radius: 20rpx;
			display: flex;
			align-items: center;
			font-weight: 600;
			justify-content: center;
			font-size: 30rpx;
			color: #ffffff;
			margin: 100rpx auto;
		}
	}
</style>
